<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Booom!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- The main CSS file -->
        <link href="css/main.css" rel="stylesheet">

        <!-- CSS file for your custom modifications -->
        <link href="css/custom.css" rel="stylesheet">

        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->
    </head>
  
    
    <!-- Scrollspy set in the body -->
    <body id="home" data-spy="scroll" data-target=".main-nav" data-offset="73">

    <!--///////////////////////////////////////// PARALLAX BACKGROUND ////////////////////////////////////////-->

    <!-- image is set in the CSS as a background image -->
    <div id="parallax"></div>

    <!--///////////////////////////////////////// end PARALLAX BACKGROUND ////////////////////////////////////////-->


    
    <!--/////////////////////////////////////// NAVIGATION BAR ////////////////////////////////////////-->

    <section id="header">

        <nav class="navbar navbar-fixed-top" role="navigation">

            <div class="navbar-inner">
                <div class="container">

                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#navigation"></button>

                    <!-- Logo goes here - replace the image with your -->
                    <a href="index.html" class="navbar-brand"><img class="logo-img" src="images/logo.png" alt="Booom! Logo"></a>


                    <div class="collapse navbar-collapse main-nav" id="navigation">


                        <ul class="nav pull-right">

                            <!-- Menu items go here -->
                            
                            <li><a href="index.html">Home</a></li>
                            <li><a href="blog-small-images.html">Blog</a></li>
        
                            <!-- If you want sub-menu items, do them like this
                            <li>
                                <ul>
                                  <li><a href="#">Item 1</a></li>
                                  <li><a href="#">Item 2</a></li>
                                </ul>
                            </li> 
                            You just need to delete these comment lines -->
                        </ul>

                    </div><!-- /nav-collapse -->
                </div><!-- /container -->
            </div><!-- /navbar-inner -->
        </nav>

    </section>

    <!--//////////////////////////////////////// end NAVIGATION BAR ////////////////////////////////////////-->

    

    <!--/////////////////////////////////////// BLOG SECTION ////////////////////////////////////////-->

    <section id="blog">

        <div class="container">

            <div class="row">
                
                <!--/// MAIN COLUMN ///-->
                <div class="col-md-8 main-column">
                    
                    <!--/// BLOG ITEM 1 ///-->

                    <div class="blog-item">
                        <div class="blog-main">
                            <div class="gallery-popup">
                                <a href="http://www.placehold.it/800x300" class="zoom"><img src="http://www.placehold.it/800x300" alt="featured-image" class="img-responsive featured-image hover"></a>
                            </div>
                            <a href="#" class="blog-title">Lorem ipsum dolor sit amet</a>
                            <div class="blog-meta">
                                <a href="#"><span class="label label-default"><span class="fui-user"></span> admin</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-calendar"></span> 5th November 2013, 2:35PM</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-chat"></span> 4 comments</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> news</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> announcements</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                                <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                            </div>
                                
                            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, cupiditate, aperiam eius quod harum sit quo repellendus.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, error, voluptatem, excepturi autem voluptatibus eius dolor aut aspernatur quas dolorem quos in eligendi sint sed assumenda perspiciatis temporibus sequi quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, illo vel provident minima quidem voluptate laudantium dignissimos. Saepe, quaerat, eos, omnis perspiciatis aperiam ut ipsum distinctio officiis corporis dicta ducimus.</p>

                            <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, error, voluptatem, excepturi autem voluptatibus eius dolor aut aspernatur quas dolorem quos in eligendi sint sed assumenda perspiciatis temporibus sequi quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, illo vel provident minima quidem voluptate laudantium dignissimos. Saepe, quaerat, eos, omnis perspiciatis aperiam ut ipsum distinctio officiis corporis dicta ducimus.</p>
                        </div><!-- /blog-main -->

                        <hr>

                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">About the Author</h3>
                          </div>
                          <div class="panel-body">
                              <div class="row">
                                  <div class="col-sm-3 col-xs-4">
                                      <img src="http://www.placehold.it/200x200" alt="author-image" class="img-responsive img-circle">
                                  </div>
                                  <div class="col-sm-9 col-xs-8">
                                      <p><a href="#">admin</a> is lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, officiis, fuga, ad dolorem non iure a odit provident debitis.</p>

                                      <ul class="social-icons">
                                        <li>
                                          <a href="#" class="fui-facebook"></a>
                                        </li>
                                         <li>
                                          <a href="#" class="fui-twitter"></a>
                                        </li>
                                         <li>
                                          <a href="#" class="fui-pinterest"></a>
                                        </li>
                                         <li>
                                          <a href="#" class="fui-googleplus"></a>
                                        </li>
                                         <li>
                                          <a href="#" class="fui-dribbble"></a>
                                        </li>
                                         <li>
                                          <a href="#" class="fui-vimeo"></a>
                                        </li>
                                      </ul>         
                                  </div>
                              </div>
                          </div>
                        </div>

                        <hr>

                        <!--/// COMMENTS SECTION ///-->
                        <h3>4 Comments</h3>
    

                        <ul class="comments">
                            <li>
                                <div class="row">
                                    <div class="col-xs-3 col-md-2">
                                        <img src="http://placehold.it/300x300" class="img-circle img-responsive" alt="" /></div>
                                    <div class="col-xs-9 col-md-10">
                                       
                                        <div class="comment-info">
                                            <a href="#">John Doe</a>
                                            <p>2 Aug 2013</p>
                                        </div>
        
                                        <div class="comment-text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, asperiores, magnam fugiat eveniet commodi debitis beatae quae impedit.</p>
                                        </div>
                                        <div class="action">
                                            <button type="button" class="btn btn-danger btn-xs" title="edit">
                                                Edit
                                            </button>
                                            <button type="button" class="btn btn-primary btn-xs" title="reply">
                                                Reply
                                            </button>                                            
                                            <button type="button" class="btn btn-primary btn-xs" title="login">
                                                Login to post reply
                                            </button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="indent-1">
                                <div class="row">
                                    <div class="col-xs-3 col-md-2">
                                        <img src="http://placehold.it/300x300" class="img-circle img-responsive" alt="" /></div>
                                    <div class="col-xs-9 col-md-10">
                                       
                                        <div class="comment-info">
                                            <a href="#">John Doe</a>
                                            <p>2 Aug 2013</p>
                                        </div>
        
                                        <div class="comment-text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, asperiores, magnam fugiat eveniet commodi debitis beatae quae impedit.</p>
                                        </div>
                                        <div class="action">
                                            <button type="button" class="btn btn-danger btn-xs" title="edit">
                                                Edit
                                            </button>
                                            <button type="button" class="btn btn-primary btn-xs" title="reply">
                                                Reply
                                            </button>                                            
                                            <button type="button" class="btn btn-primary btn-xs" title="login">
                                                Login to post reply
                                            </button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li class="indent-2">
                                <div class="row">
                                    <div class="col-xs-3 col-md-2">
                                        <img src="http://placehold.it/300x300" class="img-circle img-responsive" alt="" /></div>
                                    <div class="col-xs-9 col-md-10">
                                       
                                        <div class="comment-info">
                                            <a href="#">John Doe</a>
                                            <p>2 Aug 2013</p>
                                        </div>
        
                                        <div class="comment-text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, asperiores, magnam fugiat eveniet commodi debitis beatae quae impedit.</p>
                                        </div>
                                        <div class="action">
                                            <button type="button" class="btn btn-danger btn-xs" title="edit">
                                                Edit
                                            </button>
                                            <button type="button" class="btn btn-primary btn-xs" title="reply">
                                                Reply
                                            </button>                                            
                                            <button type="button" class="btn btn-primary btn-xs" title="login">
                                                Login to post reply
                                            </button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="row">
                                    <div class="col-xs-3 col-md-2">
                                        <img src="http://placehold.it/300x300" class="img-circle img-responsive" alt="" /></div>
                                    <div class="col-xs-9 col-md-10">
                                       
                                        <div class="comment-info">
                                            <a href="#">John Doe</a>
                                            <p>2 Aug 2013</p>
                                        </div>
        
                                        <div class="comment-text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, asperiores, magnam fugiat eveniet commodi debitis beatae quae impedit.</p>
                                        </div>
                                        <div class="action">
                                            <button type="button" class="btn btn-danger btn-xs" title="edit">
                                                Edit
                                            </button>
                                            <button type="button" class="btn btn-primary btn-xs" title="reply">
                                                Reply
                                            </button>                                            
                                            <button type="button" class="btn btn-primary btn-xs" title="login">
                                                Login to post reply
                                            </button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>

                        <hr>
                        
                        <!--/// COMMENTS ENTRY ///-->
                        <h3>Leave A Comment</h3>
                            
                        <div class="comment-form clearfix">
                            <form class="form-horizontal" role="form">
                                <label for="name" class="col-sm-4 control-label">Name</label>
                                <div class="col-sm-8">
                                  <input type="text" class="form-control input-hg" id="name" required="require" placeholder="Name">
                              </div>

                                <label for="email" class="col-sm-4 control-label">E-mail Address</label>
                                <div class="col-sm-8">
                                  <input type="email" class="form-control input-hg" id="email" required="require" placeholder="E-mail Address">
                              </div>

                                <label for="website" class="col-sm-4 control-label">Website</label>
                                <div class="col-sm-8">
                                  <input type="text" class="form-control input-hg" id="website" placeholder="Website URL">
                              </div>
                              
                                <label for="message" class="col-sm-4 control-label">Message</label>
                                <div class="col-sm-8">
                                    <textarea id="message" placeholder="type away.." class="form-control input-hg" rows="6"></textarea>
                              </div>

                                <div class="col-sm-offset-4 col-sm-8">
                                  <button type="submit" class="btn btn-primary btn-embossed btn-hg">Post Comment</button>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>


                <!--/// SIDEBAR ///-->
                <div class="col-md-3 sidebar">
                    
                    <div class="widget">
                        <div class="widget-title">Categories</div>  
                        <ul>
                            <li><a href="#">Category 1</a></li>
                            <li><a href="#">Category 2</a></li>
                            <li><a href="#">Category 3</a></li>
                            <li><a href="#">Category 4</a></li>
                            <li><a href="#">Category 5</a></li>
                        </ul>          
                    </div>
                    
                    <div class="widget">
                        <div class="widget-title">Tags</div>  
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> add</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> as many</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> as you want</span></a>
                        <a href="#"><span class="label label-default"><span class="fui-tag"></span> why not</span></a>
                    </div>                    
                </div>

            </div><!-- /row -->
        </div><!-- /container -->

    </section>

    <!--/////////////////////////////////////// end FEATURES SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// TWITTER SECTION ////////////////////////////////////////-->

    <section id="twitter">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <img src="images/icons/chat.svg" alt="" />
                    <p class="lead"><span id="tweets-feed" class="lead"></span></p>
                </div>
            </div>
        </div>
    </section>

    <!--//////////////////////////////////////// TWITTER SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// FOOTER SECTION ////////////////////////////////////////-->
    <section id="footer">
        <div class="bottom-menu-inverse">

            <div class="container">

                <div class="row">
                    <div class="col-md-6">
                        <p>Copyright &copy; 2013 Booom! Designed by <a href="http://www.simonswiss.com" target="_blank">simonswiss</a>.</p>
                    </div>

                    <div class="col-md-6 social">
                        <ul class="bottom-icons">
                            <li>
                              <a href="#" class="fui-facebook"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-twitter"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-pinterest"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-googleplus"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-dribbble"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-vimeo"></a>
                            </li>
                          </ul>                      
                    </div>
                </div>
            
            </div><!-- /row -->
        </div><!-- /container -->

    </section>

    <!--//////////////////////////////////////// end FOOTER SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// JAVASCRIPT LOAD ////////////////////////////////////////-->

    <!-- Feel free to remove the scripts you are not going to use -->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script src="js/jquery.fitvids.min.js"></script>
    <script src="assets/twitter/jquery.tweet.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/custom.js"></script>

    <!--//////////////////////////////////////// end JAVASCRIPT LOAD ////////////////////////////////////////-->

  </body>
</html>
